<template>
	<view class="content">
		<view class="title">项目总体介绍</view>
		<!-- <view id="myVideo">
			<video :src="obj.file" controls></video>
		</view> -->

		<view class="type">
			<view class="name">选择服务类型</view>
			<view class="group">
				<view @click="changeType(item)" :class="{ active: item.checked }" class="item"
					v-for="(item, index) in type_arr" :key="index">
					<view>{{ item.name }}</view>
					<view class="chfont" v-if="item.price > 0">{{ item.price }}元/亩</view>
					<view class="chfont" v-else>(请选择)</view>
				</view>
			</view>
		</view>
		<view class="type" v-if="user.level == '承包农户'">
			<view class="name">选择村庄</view>
			<view class="group">
				<view @click="changeVillage(item, index)" :class="{ active: index == current }" class="item"
					v-for="(item, index) in list" :key="index">
					<view>{{ item.address }}{{ item.landarea }}亩</view>
					<!-- <view class="chfont"></view> -->
				</view>
			</view>
		</view>

		<!-- <view class="next" @click="gopop()">下一步</view> -->
		<view class="next" @click="goNext">下一步</view>
		<!-- 缴费弹窗 -->
		<view v-if="popupdata" class="popup1"></view>
		<view v-if="popupdata" class="popup">
			<view class="setpop">
				请先缴纳平台服务费用
				<text>{{ all_land }}亩*{{ landprice }}元(单价)共：{{ money }}元</text>
				/年
			</view>
			<view class="setpopch">
				<view class="quding" @click="closes(1)">取消</view>
				<view class="quding" @click="suresub(2)">确定</view>
			</view>
		</view>
		<!-- 三级弹窗 -->
		<uni-popup ref="popup" type="center" :maskClick="false">
			<scroll-view class="item-scroll" style="height:500rpx;width: 750rpx;" scroll-y="true">
				<view class="item-group">
					<view @click="changeThird(item, index)" :class="{ active: index == save_index }" class="item"
						v-for="(item, index) in cate_list" :key="index">
						<view>{{ item.name }}</view>
						<view class="chfont">{{ item.price }}元/亩</view>
					</view>
				</view>

				<view class=""
					style="font-size: 36rpx; color: #FFFFFF; width:80%;height: 80rpx; line-height:80rpx; background-color: #18B566;border-radius: 10rpx; margin: 100rpx auto; text-align: center;"
					@click="saveThird(save_id, save_name, save_price, save_index)">
					确定
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	// import UniPopup from '@/uni-popup';
	export default {
		// components: {
		// 	UniPopup
		// },
		data() {
			return {
				type_arr: [],
				mu_arr: ['1亩', '2亩', '3亩', '4亩', '5亩', '6亩'],
				type_ids: '', //选择的服务类型id
				check_type: [], //选中的服务类型
				check_name: [], //选中的服务类型name
				check_id: [], //选中的服务类型id
				mu_index: 0,
				mu_value: '1亩',
				obj: {},
				input: '',
				popupdata: false,
				money: 0, //年费
				user: {},
				code: '',
				landprice: '', //每亩单价
				is_payment_svrfee: '', //是否交年费
				user_landarea: '', //用户拥有亩数
				type: '',
				list: [],
				current: -1,
				lever_num: 0, //承包人亩数
				lever_address: '', //承包人所选地址
				lever: '',
				leverinfo: {},
				all_num: 0, //共多少亩
				all_land: 0, //有多少亩要交钱
				cate_list: '', //三级分类，化肥品种
				third_curent: 0,
				third_id: '', //三级分类请求数据id
				third_price: '',
				third_name: '',
				save_id: '',
				save_name: '',
				save_price: '',
				delete_id: '',
				save_type: [],
				save_index: -1
			};
		},
		// computed: {
		// 	...mapState({
		// 		user: state => state.user,//个人用户信息
		// 	})
		// },
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.getWxcode();
			// #endif
			this.obj = JSON.parse(decodeURIComponent(options.item));
			uni.setNavigationBarTitle({
				title: JSON.parse(decodeURIComponent(options.item)).name + '项目申报'
			});
			this.get_year_svrfee();
			this.$http.post('/api/user/userinfo').then(res => {
				this.user = res.data.data.userinfo;
				this.user_landarea = this.user.landarea;
				let type = '';
				if (this.user.isblacklist == '0') {
					type = 'normal';
					this.type = type;
				} else {
					type = 'max';
					this.type = type;
				}
			});
			this.loadData();
			this.getinfo();
		},
		methods: {
			closes(data) {
				this.popupdata = false;
				// uni.navigateBack({
				// 	delta: 1
				// });
			},
			//三级分类
			changeThird(items, index) {
				this.save_index = index;
				this.save_id = items.id;
				this.save_name = items.name;
				this.save_price = items.price;
				this.cate_list.forEach(item => {
					if (items.id == item.id) {
						item.checked = !item.checked;
					}
				});
			},
			saveThird(id, name, price, index) {
				console.log(id);
				if (index != -1) {
					this.type_arr.forEach(item => {
						if (item.id == this.third_id) {
							item.price = price;
							item.name = name;
							item.peices = price;
							item.ids = id;
						}
					});
					this.save_index = -1;
					this.$refs.popup.close();
				} else {
					uni.showToast({
						title: '请选择种类',
						icon: 'none'
					});
				}
			},
			getsure() {
				if (this.array.length == 0) {
					uni.showToast({
						title: '请选择化肥品种',
						icon: 'none'
					});
				} else {
					this.$refs.popup.close();
				}
			},
			get_year_svrfee() {
				this.$http
					.post('/api/index/is_payment_svrfee')
					.then(res => {
						this.is_payment_svrfee = res.data.data.is_payment_svrfee;
						this.all_land = res.data.data.needPayLand;
					})
					.catch(e => {});
			},
			getinfo() {
				let token = uni.getStorageSync('token');
				this.$http
					.post('/api/Index/get_my_rent_list', {
						token: token,
						limit: '15',
						page: this.page
					})
					.then(res => {
						this.list = this.list.concat(res.data.data.data);
						let add = this.user.city + this.user.area + this.user.street;
						this.leverinfo.address = add;
						this.leverinfo.landarea = this.user.landarea;
						this.list.push(this.leverinfo);
						this.list.forEach(item => {
							this.all_num += parseInt(item.landarea);
						});
					});
			},
			getWxcode() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes.code);
						that.code = loginRes.code;
					}
				});
			},
			suresub() {
				console.log(this.code)
				let that = this;
				this.$http
					.post('/api/recharge/add', {
						money: this.money,
						// #ifdef MP-WEIXIN
						type: '1',
						// #endif
						// #ifdef APP-PLUS
						type: '2',
						// #endif
						pay_type: 'svrfee',
						// #ifdef MP-WEIXIN
						code: this.code,
						// #endif
						landarea: this.all_land
					})
					.then(res => {
						console.log(res)
						let result = typeof res.data.data.data == 'string' ? JSON.parse(res.data.data.data) : res.data
							.data.data;
						// #ifdef APP-PLUS
						this.appPay(result);
						// #endif
						// #ifdef MP-WEIXIN
						this.wxpay(result);
						// #endif
					});
			},
			wxpay(result2) {
				let that = this;
				console.log(result2);
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: result2.timeStamp,
					nonceStr: result2.nonceStr,
					package: result2.package,
					signType: result2.signType,
					paySign: result2.paySign,
					success: function(res) {
						// console.log('success:' + JSON.stringify(res));
						that.$u.toast('支付成功');
						that.popupdata = false;
						that.get_year_svrfee();
						// that.pop_show = true;
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						that.$u.toast('支付失败');
					}
				});
			},
			appPay(result2) {
				console.log(result2)
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo:result2,
					success: function(res) {
						// console.log('success:' + JSON.stringify(res));
						that.$u.toast('支付成功');
						that.popupdata = false;
						that.get_year_svrfee();
						// that.pop_show = true;
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						that.$u.toast('支付失败');
					}
				});
			},
			goNext() {
				let token = uni.getStorageSync('token');
				this.$http.post('/api/index/get_year_svrfee', {
					token: token,
					type: this.type
				}).then(res => {
					this.landprice = res.data.data.fee;
					this.money = this.all_land * this.landprice;
					if (this.is_payment_svrfee == 0) {
						this.popupdata = true;
					}
				});
				if (this.save_id != '') {
					var date = {};
					date.ids = this.save_id;
					date.name = this.save_name;
					date.price = this.save_price;
					console.log('date');
					console.log(date);
					var aa = this.check_type.find(ite => ite.ids == date.ids);
					console.log(aa);
					if (!aa) {
						this.check_type.push(date);
					}
					console.log(this.check_type);
				}

				if (this.is_payment_svrfee == 1) {
					if (this.check_type.length == 0) {
						this.$u.toast('请选择服务类型');
						return;
					}
					if (this.current == -1 && this.user.level == '承包农户') {
						this.$u.toast('请选择村庄');
						return;
					}
					var ids = '';
					var names = '';
					var price = 0;

					console.log(this.check_type);
					for (var i = 0; i < this.check_type.length; i++) {
						if (ids == '') {
							ids = this.check_type[0].ids;
						} else {
							ids = ids + ',' + this.check_type[i].ids;
						}
						if (names == '') {
							names = this.check_type[i].name;
						} else {
							names = names + ',' + this.check_type[i].name;
						}
						price = parseInt(price) + parseInt(this.check_type[i].price);
					}
					let number = '';
					let num = this.user_landarea * price;
					if (this.user.level == '承包农户') {
						let num = this.lever_num * price;
						var obj = {
							name: this.obj.name,
							number: this.lever_num,
							price: num,
							cate_id: this.obj.id,
							cate_ids: ids,
							names: names,
							address: this.lever_address,
							lever: this.user.level
						};
						uni.navigateTo({
							url: '/pages/componentA/pay/pay?obj=' + encodeURIComponent(JSON.stringify(obj))
						});
					} else {
						var obj = {
							name: this.obj.name,
							number: this.user_landarea,
							price: num,
							cate_id: this.obj.id,
							cate_ids: ids,
							names: names
						};
						uni.navigateTo({
							url: '/pages/componentA/pay/pay?obj=' + encodeURIComponent(JSON.stringify(obj))
						});
					}
				}
			},
			//选择服务类型
			changeType(item) {
				this.third_id = item.id;
				item.checked = !item.checked;
				let token = uni.getStorageSync('token');
				if (item.checked) {
					var aa = this.check_type.find(ite => ite.id == item.ids);
					if (!aa && item.price != 0 && item.prices == undefined) {
						this.check_type.push(item);
					}
					this.$http.post('/api/index/project', {
						token: token,
						cate_id: item.id
					}).then(res => {
						this.cate_list = res.data.data.cate_list;
						if (this.cate_list.length > 0) {
							this.cate_list.forEach(item => {
								this.$set(item, 'checked', false);
							});
							this.$refs.popup.open('center');
						}
					});
				} else {
					console.log('!check');
					console.log(this.check_type);
					this.save_id = '';
					var index = this.check_type.findIndex(ite => ite.id == item.ids);
					this.check_type.splice(index, 1);
				}
			},
			//选择村庄
			changeVillage(item, index) {
				console.log(item.landarea);
				console.log(item.address);
				this.current = index;
				this.lever_address = item.address;
				this.lever_num = item.landarea;
			},

			changeMu(index) {
				this.mu_index = index;
				this.mu_value = this.mu_arr[index];
			},
			fillMu() {
				this.mu_index = -1;
				this.mu_value = this.input;
			},
			loadData() {
				this.$http.post('/api/index/project', {
					cate_id: this.obj.id
				}).then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.data.cate_list.length; i++) {
						if (i === 0) {
							this.$set(res.data.data.cate_list[i], 'checked', true);
							this.check_type.push(res.data.data.cate_list[i]);
						} else {
							this.$set(res.data.data.cate_list[i], 'checked', false);
						}
					}
					res.data.data.cate_list.forEach(item => {
						item.ids = item.id;
					});
					this.type_arr = res.data.data.cate_list;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #f8f8f8;
		overflow: hidden;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin: 30rpx auto 20rpx;
		text-align: center;
	}

	#myVideo{
		width:690rpx;
		height:300rpx;
		border-radius:20rpx;
		overflow: hidden;
		margin: 0 auto;
	}
	#myVideo>video{
		width: 100%;
		height: 100%;
		border-radius:20rpx;
	}

	.colmun {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.xuan {
		color: #3fc377;
	}

	.chfont {
		font-size: 15px;
	}

	.type {
		margin-top: 30rpx;

		.name {
			font-size: 17px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.group {
			margin-top: 6rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			.item {
				margin-top: 15rpx;
				width: 220rpx;
				// height:100rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 10px;
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				text-align: center;
				padding: 12rpx 0 9.5rpx;
				margin-right: 15rpx;

				// overflow:hidden;
				// text-overflow:ellipsis;
				// white-space:nowrap;
				&:nth-child(3n) {
					margin-right: 0;
				}

				&.active {
					background-color: #3fc377;
					color: #ffffff;
				}
			}
		}

		.other {
			margin-top: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			text {
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			input {
				display: block;
				outline: none;
				border-bottom: 1px solid #c7c7c7;
				width: 110rpx;
			}
		}
	}

	.next {
		width: 535rpx;
		height: 88rpx;
		background: rgba(63, 195, 119, 1);
		border-radius: 10px;
		margin: 60rpx auto;
		text-align: center;
		line-height: 88rpx;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.popup1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 150%;
		background: #000;
		opacity: 0.7;
		filter: alpha(opacity=50);
		z-index: 100;
	}

	.popup {
		position: absolute;
		top: 200px;
		left: 50%;
		width: 291px;
		/* height:564upx; */
		background: #fff;
		margin-left: -145px;
		border-radius: 10upx;
		font-weight: 600;
		z-index: 102;
	}

	.setpop {
		text-align: center;
		margin-top: 39.5px;
		margin-bottom: 46px;
		font-size: 18px;
	}

	.setpopch {
		display: flex;
		justify-content: space-between;
		padding: 0 12px 13.5px;
	}

	.setpopch view {
		width: 125px;
		line-height: 44px;
		text-align: center;
		border-radius: 5px;
	}

	.setpopch :first-child {
		background-color: #e5e5e5;
		color: #a8a8a8;
	}

	.setpopch :last-child {
		background-color: #3fc377;
		color: white;
	}

	.item-scroll {
		background-color: #eeeeee;

		.item-group {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.item {
				margin-top: 15rpx;
				width: 30%;
				background: rgba(255, 255, 255, 1);
				border-radius: 10px;
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				text-align: center;
				padding: 12rpx 0 9.5rpx;
				margin-left: 3%;

				&:nth-child(3n) {
					//margin-right: 0;
				}

				&.active {
					background-color: #3fc377;
					color: #ffffff;
				}
			}
		}
	}
</style>
